'use client'

import { Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'

export function ThemeToggle() {
  const [mounted, setMounted] = useState(false)
  const { setTheme, resolvedTheme } = useTheme()

  const setThemeColor = (theme?: string) => {
    const meta = document.querySelector('meta[name="theme-color"]')
    if (!meta) {
      const meta = document.createElement('meta')
      meta.name = 'theme-color'
      meta.content = theme === 'dark' ? '#0c111c' : '#f9fbfe'
      document.head.appendChild(meta)
    }
    else {
      meta.setAttribute('content', theme === 'dark' ? '#0c111c' : '#f9fbfe')
    }
  }

  useEffect(() => {
    setMounted(true)
    setThemeColor(resolvedTheme)
  }, [])

  if (!mounted) {
    // 渲染一个占位符以避免布局偏移
    return <div className="w-10 h-10" />
  }

  const toggleTheme = () => {
    // 检查浏览器是否支持 View Transitions API
    const targetTheme = resolvedTheme === 'dark' ? 'light' : 'dark'
    setThemeColor(targetTheme)
    if (!(document as any).startViewTransition) {
      setTheme(targetTheme)
      return
    }

    (document as any).startViewTransition(() => {
      setTheme(targetTheme)
    })
  }

  return (
    <button
      onClick={toggleTheme}
      className="w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors"
      aria-label="Toggle theme"
    >
      {resolvedTheme === 'dark'
        ? (
            <Sun className="w-full h-full" />
          )
        : (
            <Moon className="w-full h-full" />
          )}
    </button>
  )
}
